<template>
  <div class="">
    <a-spin :loading="spinLoading" :tip="spinTip" dot style="width: 100%;">
      <a-card class="custom-card">
        <DetailForm
          ref="detailFormRef"
          :categoryDatas="categoryDatas"
          @saveCallback="fetchData()"
        />
      </a-card>
    </a-spin>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';

  import { apiCateList } from '@/api/article';
  import DetailForm from './components/form.vue';

  const router = useRouter();

  const spinLoading = ref(false);
  const spinTip = ref();
  const categoryDatas = ref([]); // 分类
  const detailFormRef = ref();

  const fetchData = async () => {
    // const routeParams = router.currentRoute.value.params;
    const routeParams = router.currentRoute.value.query;
    if (routeParams) {
      detailFormRef.value.fetchData({id: routeParams.id});
    }
  };

  const getCategory = async () => {
    const { data } = await apiCateList();
    categoryDatas.value = data.data;
  };

  onMounted(async () => {
    await fetchData();
    await getCategory();
  });
</script>

<script>
  export default {
    name: 'ArticleDetail',
  };
</script>

<style scoped lang="less">

</style>
